<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>购物车案例</title>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<body>


    <div id="app" align="center">
      <h2>{{message}}</h2>

      <h1>购物车案例</h1>
      <table style="width: 800px" class=" table-bordered table-hover table table-striped" border="1px">
        <thead>
          <tr align="center">
            <th>序号</th>
            <th>书籍编号</th>
            <th>书籍名称</th>
            <th>出版日期</th>
            <th>价格</th>
            <th>数量</th>
            <th>操作</th>
          </tr>

        </thead>
        <tbody >
        <tr v-for="(book,index) in books" align="center">
          <td>{{index + 1}}</td>
          <td>{{book.id}}</td>
          <td>{{ '《' + book.name + '》'}}</td>
          <td>{{book.publicationDate}}</td>
          <td>{{ '￥' + book.price}}</td>
          <td>
            <input type="button" value="+" @click="increment(index)">
            {{book.quantity}}
            <input type="button" value="-" @click="decrement(index)" v-bind:disabled="book.quantity == 1">
          </td>
          <td><button type="button" class="btn btn-danger btn-sm" @click="remove(index)">移除</button> </td>
        </tr>

        <tr align="right">
          <th colspan="7" >

              <div class="p3 ">
                总价格:{{ '￥' + totalPrice}}
              </div>

          </th>
        </tr>
        </tbody>

      </table>

    </div>

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "hello world !",
        books: [
          {id: '10201', name: '算法导论', publicationDate: '2001-05-23', price: 85.00, quantity: 1},
          {id: '10402', name: '计算机组成原理', publicationDate: '2015-04-16', price: 69.00, quantity: 1},
          {id: '10503', name: '操作系统', publicationDate: '2021-03-13', price: 49.00, quantity: 1},
          {id: '10809', name: '计算机网络', publicationDate: '2008-11-27', price: 59.00, quantity: 1},
          {id: '15037', name: '图解TCP/IP协议', publicationDate: '2020-05-21', price: 39.00, quantity: 1},
        ]
      },
      computed: {
        totalPrice: function (){
          let totalPrice = 0;
          for(let index = 0; index < this.books.length; index++){
            totalPrice += this.books[index].price * this.books[index].quantity;
          }
          return totalPrice;
        },
      },
      methods: {
        increment(index){
          this.books[index].quantity++;
        },
        decrement(index){
          this.books[index].quantity--;
        },
        remove(index){
          this.books.splice(index,1);
        }
      }
    })

  </script>


</body>
</html>